<template>
  <div class="publishtask">
    <div class="title">创建任务</div>
    <!-- 任务的标题 -->
    <taskTitle ref="titleRef" @updata-title="titleUpdate"></taskTitle>
    <!-- 周期选择 -->
    <taskDatePicker ref="datePickerRef" @getTimeDate="dateUpdate"></taskDatePicker>
    <!--任务积分分配  -->
    <taskPoints ref="pointsRef" @updateScore="ScoreUpdate"></taskPoints>
    <!-- 任务对应模块的选择 -->
    <taskModelChoose></taskModelChoose>
    <!-- 任务描述 -->
    <taskDescribe
      ref="describeRef"
      :taskDescribe="task.taskDescribe"
      @requirementUpdate="requirementUpdate"
    ></taskDescribe>
    <!-- 技能需求 -->
    <taskRequirements
      :needSkills="needSkills"
      :skillNeeds="task.skillNeeds"
      @update-skills="skillsUpdate"
    ></taskRequirements>
    <!-- 招募角色 -->
    <taskRole ref="roleRef" :rolesDescribe="rolesDescribe" @update-role="roleUpdate"></taskRole>
    <!-- 联系方式 -->
    <taskContactInf ref="contactRef" @contactUpdate="contactUpdate"></taskContactInf>
    <div class="publish">
      <el-button type="primary" @click="publishTask"> 创 建 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import taskTitle from './c-cpns/task-title.vue'
import taskContactInf from './c-cpns/task-contactInf.vue'
import taskDatePicker from './c-cpns/task-date-picker.vue'
import taskModelChoose from './c-cpns/task-model-choose.vue'
import taskRequirements from './c-cpns/task-requirements.vue'
import taskDescribe from './c-cpns/task-describe.vue'
import taskRole from './c-cpns/task-role.vue'
import taskPoints from './c-cpns/task-points.vue'
import { addTask } from '@/service/taskdetail/taskdetail'
import { needSkills, rolesDescribe } from '@/global/constants'
import type { creatTaskType } from '../../../types/task'
import { upLoadFile } from '@/service/project/project'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const task = reactive<creatTaskType>({
  projectsId: '',
  taskName: '',
  createDate: '',
  finishDate: '',
  taskDescribe: '',
  attachements: '',
  taskScore: 0,
  list: [],
  skillNeeds: [],
  taskRole: '',
  principal: '',
  phone: ''
})

const titleRef = ref<typeof taskTitle>()
const datePickerRef = ref<typeof taskDatePicker>()
const pointsRef = ref<typeof taskPoints>()
const describeRef = ref<typeof taskDescribe>()
const contactRef = ref<typeof taskContactInf>()
const roleRef = ref<typeof taskRole>()
const { no } = route.params
task.projectsId = no

//修改任务名
const titleUpdate = (v: any): void => {
  task.taskName = v
}

const dateUpdate = (v1: any, v2: any): void => {
  task.createDate = v1
  task.finishDate = v2
  console.log(v1, v2)
}
//修改项目描述
const requirementUpdate = async (value: any, addition: any): Promise<void> => {
  task.taskDescribe = value
  if (addition.has('file')) {
    const res: any = await upLoadFile(addition)
    task.attachements = res.data
  } else {
    task.attachements = addition
  }
}
//修改项目积分的值
const ScoreUpdate = (v: any): void => {
  task.taskScore = v
}
//修改技能需求
const skillsUpdate = (v: any): void => {
  task.skillNeeds = v
}
//修改招募角色
const roleUpdate = (v: any): void => {
  task.taskRole = v
}
//修改联系方式
const contactUpdate = (v1: any, v2: any): void => {
  task.principal = v1
  task.phone = v2
}
// 发布任务
const publishTask = async () => {
  if (roleRef.value?.vailDate()) return
  if (!titleRef.value?.upLoadtaskTitle()) return
  if (!datePickerRef.value?.valDate()) return
  if (!pointsRef.value?.upLoadPoints()) return
  if (describeRef.value?.vailDate()) return
  if (!contactRef.value?.updateContact()) return
  console.log(task)

  const res = await addTask(task)
  if (res.code == 0) {
    ElMessage({
      type: 'error',
      message: res.msg
    })
  } else {
    router.push('/main/projects/details/' + no + '?nowTab=list')
  }
  console.log(res)
}
onMounted(() => {
  document.title = '创建任务 - 实力接单'
})
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  height: 40px;
  font-size: 28px;
  font-weight: 500;
  color: #0b121a;
  line-height: 40px;
  margin: 0 auto 0;
  letter-spacing: 15px;
}
.publishtask {
  width: 1100px;
  padding: 24px 24px 12px;
  background: #fff;
  border-radius: 8px;
  margin: 20px auto;
  .publish {
    margin-top: 10px;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    .el-button {
      width: 150px;
    }
  }
}
</style>
